<template>
  <div id="{{element}}">
  </div>
</template>

<script>
import Highcharts from 'highcharts';
export default {
  props: ['element'],
  ready () {
    $(function () {
      Highcharts.Chart({
        chart: {
          renderTo: this.element,
          type: 'bar',
          height: 200,
          margin: [0, 20, 0, 40]
        },
        title: {
          text: null
        },
        xAxis: {

          lineColor: null,
          labels: {
            rotation: -90
          },
          categories: [
            'Brick'
          ]
        },
        yAxis: [{

          min: 0,
          max: 100,
          endOnTick: true,
          maxPadding: 0.02,
          gridLineColor: null,

          title: {
            text: null
          },
          labels: {
            y: -50
          }
        }],
        legend: {
          shadow: false,
          verticalAlign: 'bottom'
        },
        tooltip: {
          shared: true,
          followPointer: true
        },
        plotOptions: {
          column: {
            grouping: true,
            shadow: false,
            borderWidth: 0
          }
        },
        credits: {
          enabled: false
        },
        series: [{
          name: 'Objetivo',
          color: 'rgba(224,224,224,1)',
          data: [100],
          pointPadding: 0.3,
          pointPlacement: -0.2
        }, {
          name: 'Realizado',
          color: 'rgba(106,166,46,.9)',
          data: [76],
          pointPadding: 0.4,
          pointPlacement: 0.1
        }, {
          type: 'spline',
          name: 'Projeção',
          color: 'rgba(106,166,46,.9)',
          top: 10,
          pointPlacement: -0.05,
          data: [95],
          marker: {
            radius: 8,
            lineColor: '#666666',
            lineWidth: 1
          }
        }]
      });
    });
  }
}
</script>
